<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>工资条</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<script src="js/jquery-1.10.1.min.js"></script>

	<link rel="stylesheet" href="css/mui.min.css">
	<link rel="stylesheet" href="css/css.css">
	<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
</head>

<body>
<header class="mui-bar mui-bar-nav">
	<h1 class="mui-title">工资条</h1>
</header>
<div class="mui-content">
	<div class="gzt_head">
		<div class="text hide">
			<a class="gz_text" href="gz_detail.html"><span class="gz_num">****</span><i class="mui-icon mui-icon-arrowright"></i></a>
			<p>本月实发工资<i class="icon"></i></p>
		</div>
		<div class="select">
			<span id="rl_text">2022年12月</span>
			<span class="mui-icon mui-icon-arrowdown"></span>
			<button id="rl_but" class="btn mui-btn mui-btn-block">2022年12月</button>
		</div>
		
	</div>
	<div class="main">
		<div class="bg"></div>
		<div class="mui-card gz_item">
			<a class="item" href="gz_detail.html">
				<div class="text">2022年12月基本工资</div>
				<span class="tag color_4873C1">已确认</span>
			</a>
			<a href="gz_detail.html" class="item">
				<div class="text">2022年12月绩效奖金</div>
				<span class="tag color_EF4033">未确认</span>
			</a>
		</div>
		<div class="mui-card gz_item2">
			<ul class="mui-table-view mui-grid-view">
				<li class="mui-table-view-cell mui-col-xs-6">
					<h3>110088.0</h3>
					<p>总收入工资</p>
				</li>
				<li class="mui-table-view-cell mui-col-xs-6">
					<h3>110088.0</h3>
					<p>总收入工资</p>
				</li>
			</ul>
			<div class="select">
				<span id="year_text">2022年</span>
				<span class="mui-icon mui-icon-arrowdown"></span>
				<button id="year_but" class="btn mui-btn mui-btn-block">2022年</button>
			</div>
			<div class="tongji">
				<div class="item">
					<span>12月</span>
					<div class="bar">
						<div class="bar_color" style="width:100%">
							<div class="text">10008.0</div>
						</div>
					</div>
				</div>
				<div class="item">
					<span>11月</span>
					<div class="bar">
						<div class="bar_color" style="width:80%">
							<div class="text">8008.0</div>
						</div>
					</div>
				</div>
				<div class="item">
					<span>10月</span>
					<div class="bar">
						<div class="bar_color" style="width:100%">
							<div class="text">10008.0</div>
						</div>
					</div>
				</div>
				<div class="item">
					<span>9月</span>
					<div class="bar">
						<div class="bar_color" style="width:80%">
							<div class="text">8008.0</div>
						</div>
					</div>
				</div>
				<div class="item">
					<span>8月</span>
					<div class="bar">
						<div class="bar_color" style="width:100%">
							<div class="text">10008.0</div>
						</div>
					</div>
				</div>
				<div class="item">
					<span>7月</span>
					<div class="bar">
						<div class="bar_color" style="width:80%">
							<div class="text">8008.0</div>
						</div>
					</div>
				</div>
				<div class="item">
					<span>6月</span>
					<div class="bar">
						<div class="bar_color" style="width:100%">
							<div class="text">10008.0</div>
						</div>
					</div>
				</div>
				<div class="item">
					<span>5月</span>
					<div class="bar">
						<div class="bar_color" style="width:80%">
							<div class="text">8008.0</div>
						</div>
					</div>
				</div>
				<div class="item">
					<span>4月</span>
					<div class="bar">
						<div class="bar_color" style="width:100%">
							<div class="text">10008.0</div>
						</div>
					</div>
				</div>
				<div class="item">
					<span>3月</span>
					<div class="bar">
						<div class="bar_color" style="width:80%">
							<div class="text">8008.0</div>
						</div>
					</div>
				</div>
				<div class="item">
					<span>2月</span>
					<div class="bar">
						<div class="bar_color" style="width:100%">
							<div class="text">10008.0</div>
						</div>
					</div>
				</div>
				<div class="item">
					<span>1月</span>
					<div class="bar">
						<div class="bar_color" style="width:80%">
							<div class="text">8008.0</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="nav">
		<ul class="mui-table-view mui-grid-view">
			<li class="mui-table-view-cell mui-col-xs-6 active">
				<a href="index.html"><span class="icon"></span>
				<p>工资条</p></a>
			</li>
			<li class="mui-table-view-cell mui-col-xs-6">
				<a href="wode.html"><span class="icon"></span>
				<p>我的</p></a>
			</li>
		</ul>
	</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script>
$('.gzt_head .text .icon').click(function(){
	var div_box=$(this).parents('.text')
	if(div_box.hasClass('hide')){
		div_box.removeClass('hide').find('.gz_num').text('8435.23')
	}else{
		div_box.addClass('hide').find('.gz_num').text('****')
	}
});
(function(mui) {
	var _getParam = function(obj, param) {
		return obj[param] || '';
	};
	var rl_text = document.getElementById('rl_text');
	var rl_but = document.getElementById('rl_but');
	rl_but.addEventListener('tap', function() {
		var picker = new mui.DtPicker({
			type: "month", //设置日历初始化
			beginYear: 1898, //设置开始日期
			endDate: new Date //设置结束日期
		});
		picker.show(function(rs) {
			var rs=new Date
			rl_text.innerText = rs.getFullYear()+'年'+(rs.getMonth()+1)+'月';
			picker.dispose();
		});
	}, false);
	
	var userPicker = new mui.PopPicker();
	userPicker.setData([{
		text: 2022
	}, {
		text: 2021
	}, {
		text: 2020
	}, {
		text: 2019
	}]);
	var year_text = document.getElementById('year_text');
	var year_but = document.getElementById('year_but');
	year_but.addEventListener('tap', function(event) {
		userPicker.show(function(items) {
			var text=JSON.stringify(items[0].text)
			year_text.innerText = text+'年';
		});
	}, false);
})(mui,document);
	
</script>
</body>
</html>